<template>
	<view class="index-container">
		<view class="index-title-container">
			<image :src="indexTitleImage">
			</image>
		</view>
		<view class="button-group">
			<view class="item-line">
				<view @click="toProcessTips" class="button-item">
					<view class="item-info">
						<text class="info-text">
							备案流程说明及下载
						</text>
						<view class="info-button">
							去下载
						</view>
					</view>
					<image :src="beianliucheng"></image>
				</view>
				<view @click="toApplyPage('report',null)" class="button-item">
					<view class="item-info">
						<text class="info-text">
							投诉举报
						</text>
						<view class="info-button">
							去举报
						</view>
					</view>
					<image :src="tousujubaoImage"></image>
				</view>
			</view>
			<view class="item-line">
				<view @click="toApplyPage('record',1)" class="button-item">
					<view class="item-info">
						<text class="info-text">
							小型工程安全备案
						</text>
						<view class="info-button">
							去申请
						</view>
					</view>
					<image :src="gonchengaqbaImage"></image>
				</view>
				<view @click="toApplyPage('acceptance',1)" class="button-item">
					<view class="item-info">
						<text class="info-text">
							小型工程完工验收
						</text>
						<view class="info-button">
							去申请
						</view>
					</view>
					<image :src="xxgcwgysImage"></image>
				</view>
			</view>
			<view class="item-line">
				<view @click="toApplyPage('record',2)" class="button-item">
					<view class="item-info">
						<text class="info-text">
							零星作业安全备案
						</text>
						<view class="info-button">
							去申请
						</view>
					</view>
					<image :src="lxzyaqbaImage"></image>
				</view>
				<view @click="toApplyPage('acceptance',2)" class="button-item">
					<view class="item-info">
						<text class="info-text">
							零星作业完工验收
						</text>
						<view class="info-button">
							去申请
						</view>
					</view>
					<image :src="lxzywgysImage"></image>
				</view>
			</view>
			<view @click="toLogin" style="position: relative;width: 100%;height: 257.42rpx;text-align: center;">
				<view style="position: absolute;width: 655rpx; height: 257.42rpx; display: inline-block;">
					<view
						style="text-align: left;height: 100%; position: absolute;left: 28rpx;top: 0;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
						<!-- <view style="text-align: left; position: absolute;top: 61.42rpx; left: 28rpx; color: #FFFFFF; font-size: 38rpx;font-weight: 500;"> -->
						<text style="font-size: 38rpx; color: #FFFFFF;font-weight: 500;">
							系统工作人员登录
						</text>
						<view
							style="margin-top: 16rpx;border-radius: 21rpx;background-color: #FFFFFF;padding: 5rpx 31rpx;font-size: 24rpx;font-weight: 400;line-height: 33rpx;color: #447AFC;">
							登录
						</view>
					</view>
				</view>
				<image style="width: 655rpx; height: 257.42rpx;" :src="loginImage"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import beianliucheng from 'static/beianliucheng.png'
	import loginImage from 'static/login.png'
	import tousujubaoImage from 'static/tousujubao.png'
	import xxgcwgysImage from 'static/xxgcwgys.png'
	import gonchengaqbaImage from 'static/gonchengaqba.png'
	import lxzyaqbaImage from 'static/lxzyaqba.png'
	import lxzywgysImage from 'static/lxzywgys.png'
	import indexTitleImage from 'static/index-title.png'
	export default {
		data() {
			return {
				indexTitleImage,
				beianliucheng,
				tousujubaoImage,
				loginImage,
				xxgcwgysImage,
				gonchengaqbaImage,
				lxzyaqbaImage,
				lxzywgysImage
			}
		},
		onLoad() {
			// uni.showShareMenu({
			//   withShareTicket: true,
			//   menus: ['shareAppMessage', 'shareTimeline']
			// });
		},
		onShareAppMessage(object) {
			return {};
		},
		onShareTimeline() {
			return { title: '琴川街道工程安全备案管理' };
		},
		methods: {
			toApplyPage(type, proType) {
				uni.navigateTo({
					url: `../report/report?type=${type}&proType=${proType}`
				})
			},
			toProcessTips() {
				uni.navigateTo({
					url: '../process_tips/process_tips'
				})
			},
			toLogin() {
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						console.log(res.data)
						if (res.data) {
							uni.navigateTo({
								url: '../safe_data_pages/safe_data_pages'
							})
						} else {
							uni.navigateTo({
								url: '../login/login'
							})
						}
					},
					fail: (res) => {
						uni.navigateTo({
							url: '../login/login'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.index-container {
		padding-top: 31rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		background: #F7F7F7;
		height: 100vh;

		.index-title-container {
			height: 100rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 430rpx;
				height: 100%;
			}
		}

		.button-group {
			margin-top: 31rpx;
			flex: 1;
			height: 0;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;

			.item-line {
				display: flex;

				.button-item {
					position: relative;
					width: 355rpx;
					height: 275rpx;

					image {
						width: 355rpx;
						height: 275rpx;
					}

					.item-info-left {
						justify-content: flex-start !important;
					}

					.item-info {
						width: 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.info-text {
							font-size: 30rpx;
							color: #FFFFFF;
						}

						.info-button {
							margin-top: 14rpx;
							color: #FFFFFF;
							font-size: 24rpx;
							border: 1px solid #FFFFFF;
							opacity: 1;
							border-radius: 21px;
							padding: 5rpx 19rpx;
						}
					}
				}
			}
		}
	}

	.index-grid {
		width: 100%;
	}
</style>
